<template>
    <div class="search">
        <app-header
            title="搜索"
            style="background: #fff; color: #333;"
        />
        <div class="search_form">
            <input type="text" v-model="keyword" placeholder="歌手/歌名/拼音">
            <button class="btn is-active" @click="searchHandle">搜索</button>
        </div>
        <div class="search_hot" v-if="searchResultList.length === 0">
            <div class="title">最近热门</div>
            <div class="content">
                <div
                    class="search_hot_item"
                    v-for="item in hotList"
                    :key="item"
                    @click="searchHandle(item.keyword)"
                >
                    {{item.keyword}}
                </div>
            </div>
        </div>
        <div class="search_result" v-else>
            <song-item
                v-for="item in searchResultList"
                :key="item"
                :title="item.filename"
                :hash="item.hash"
            />
        </div>
    </div>
</template>

<script>
import AppHeader from 'Components/AppHeader'
import SongItem from 'Components/SongItem'
import { ref, onBeforeMount } from 'vue'
import { getSearchHot, search } from 'Api/song'
export default {
    name: 'SearchPage',
    components: { AppHeader, SongItem },
    setup () {
        const keyword = ref('')
        const hotList = ref([])
        const searchResultList = ref([])

        onBeforeMount(async () => {
            const data = await getSearchHot(0, 30)
            hotList.value = data.data.info
        })

        const searchHandle = async (key = '') => {
            // 根据 keyword 请求 api
            if ((key !== '' && typeof (key) === 'string')) {
                keyword.value = key
            }
            const data = await search(keyword.value, 0, 30)
            searchResultList.value = data.data.info
        }

        return {
            keyword,
            hotList,
            searchResultList,
            searchHandle
        }
    }
}
</script>

<style lang="scss" scoped>
.search_form {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    background: #fbfbfb;
    input {
        width: 70%;
        height: 36px;
        border: 1px solid #e5e5e5;
        outline: none;
        border-radius: 5px;
        text-indent: 1rem;
        font-size: 1rem;
    }
    .btn {
        width: 50px;
        height: 36px;
        margin-left: 10px;
        border-radius: 5px;
        box-shadow: none;
        border: none;
        font-size: 1rem;
        &.is-active {
            background: #2ca2f9;
            color: #fff;
        }
    }
}
.search_hot {
    .title {
        height: 46px;
        padding-left: 10px;
        padding-right: 10px;
        border-bottom: 1px solid #afafaf;
        line-height: 46px;
        font-size: 0.9rem;
        color: #2ca2f9;
    }
    .content {
        .search_hot_item {
            height: 50px;
            padding-left: 10px;
            padding-right: 10px;
            border-bottom: 1px solid #efefef;
            line-height: 50px;
            font-size: 1rem;
            color: #333;
        }
    }
}
</style>
